 /*
 * @description: tab组件
 * @Author: along
 * @Date: 2020-09-08
 * @Last Modified by: along
 * @Last Modified time: 2020-09-11
 */
<template>
    <div
        class="tab"
        :style="{background: '#fff', height: '64px'}"
        @click="emitEvent(0)"
    >
        <div class="statusbar">
            <div class="statusbar-left">
                <i
                    class="iconfont el-icon-hand-left"
                    :style="{color: '#000000'}"
                />
            </div>
            <div class="statusbar-center">
                <p
                    class="center-text"
                    :style="{color: '#000000'}"
                >8:28</p>
                <p
                    class="center-eng"
                    :style="{color: '#000000'}"
                >AM</p>
            </div>
            <div class="statusbar-right">
                <i
                    class="iconfont el-icon-hand-bluetooth"
                    :style="{color: '#000000'}"
                />
                <p
                    class="right-numer"
                    :style="{color: '#000000'}"
                >100%</p>
                <i
                    class="iconfont el-icon-hand-Battery"
                    :style="{color: '#000000'}"
                />
            </div>
        </div>
        <div class="tab-header">
            <i
                class="iconfont tab-icon el-icon-hand-zuojiantou1"
                :style="{color: '#000000'}"
            />
            <!-- 页面标题 -->
            <p
                class="tab-title"
                :style="{color: '#000000'}"
            >
                {{ !config.title ? '掌上大学' : config.title }}
            </p>
            <i
                class="iconfont tab-icon el-icon-hand-fenxiang1"
                :style="{color: '#fff'}"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: 'Tab',
    props: {
        config: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {

        };
    },
    mounted () {

    },
    methods: {
        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,
                index: -1
            });
        }
    }
};
</script>

<style lang="less" scoped>
.tab {
    width: 375px;
    height: 64px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    // &:hover {
    // }
    .statusbar {
        width: 375px;
        height: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0px;
        position: relative;
        .statusbar-left, .statusbar-center, .statusbar-right {
            display: flex;
            height: 20px;
            align-items: center;
            font-size: 20px;
            font-weight: 500;
            .el-icon-hand-left, .el-icon-hand-bluetooth, .el-icon-hand-Battery {
                font-size: 20px;
                color: #030303;
            }
            .center-text {
                color: #030303;
                font-size: 12px;
                margin-right: 4px;
                font-weight: 500;
            }
            .center-eng{
                color: #030303;
                font-size: 12px;
                font-weight: 500;
            }
            .right-numer {
                color: #030303;
                font-size: 12px;
            }
            .el-icon-hand-bluetooth {
                margin-right: -3px;
            }
        }
        .statusbar-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    i {
        font-size: 19px;
        position: relative;
        z-index: 1;
    }
    .tab-header {
        width: 375px;
        height: 24px;
        margin-top: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 10px;
        position: relative;
        z-index: 1;
        .tab-icon {
            font-size: 20px;
            font-weight: 500;
            color: #333333;
        }
        .tab-title {
            font-size: 16px;
            color: #333333;
            font-weight: 500;
        }
    }
    .tab-image {
        width: 375px;
        position: absolute;
        left: 0;
        top: 20px;
        z-index: 0;
        height: 44px;
    }
}
</style>